<template>
  <div class="car-details-container">
    <button @click="goBack" class="back-button">返回</button>
    <div class="car-header">
      <img :src="carInfo.avatarImg" alt="Car Image" class="car-img">
      <div class="car-info">
        <h2>{{ carInfo.carNo }}</h2>
        <p>品牌: {{ carInfo.brand }}</p>
        <p>燃料: {{ carInfo.fuelType }}</p>
        <p>排量: {{ carInfo.displacement }}</p>
      </div>
    </div>
    <div class="car-specs">
      <table class="specs-table">
        <tr>
          <th>电池类型</th>
          <td>{{ carInfo.battery }}</td>
        </tr>
        <tr>
          <th>额定电压</th>
          <td>{{ carInfo.voltage }} V</td>
        </tr>
        <tr>
          <th>电池容量</th>
          <td>{{ carInfo.capacity }} Ah</td>
        </tr>
        <tr>
          <th>续航里程</th>
          <td>{{ carInfo.range }} Km</td>
        </tr>
        <tr>
          <th>车架号</th>
          <td>{{ carInfo.vehicleIdentifyNo }}</td>
        </tr>
        <tr>
          <th>最高车速</th>
          <td>{{ carInfo.maxSpeed }} Km/h</td>
        </tr>
        <tr>
          <th>加速时间</th>
          <td>{{ carInfo.accelerationTime }}</td>
        </tr>
        <tr>
          <th>车型参数</th>
          <td>{{ carInfo.modelParameters }}</td>
        </tr>
        <tr>
          <th>能耗说明</th>
          <td>{{ carInfo.energyConsumptionDesc }}</td>
        </tr>
        <tr>
          <th>其他说明</th>
          <td>{{ carInfo.otherDesc }}</td>
        </tr>
      </table>
    </div>
    <div class="actions">
      <button @click="deleteCar(carInfo.id)" class="remove-btn">移除</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import router from '@/router';
import {useRoute} from "vue-router";
import {myCarOne, removeCar} from "../../api/myCar";
import {ElMessage} from "element-plus";

// 获取当前路由对象
const route = useRoute();

// 从路由参数中获取 id
const id = route.params.id;

console.log('Received car ID:', id);


const carInfo = ref({
  avatarImg: '',
  carNo: '粤A.5TG68',
  brand: '宝马X3',
  fuelType: '油电混合',
  battery: '略',
  batteryType: '略',
  voltage: '略',
  capacity: '略',
  range: '略',
  vehicleIdentifyNo: '略',
  maxSpeed: '略',
  accelerationTime: '略',
  modelParameters: '略',
  energyConsumptionDesc: '略',
  otherDesc: '略'
});

function getCarInfoOne() {
  myCarOne(id).then(res => {
    if (res.data.code === 200000){
      carInfo.value = res.data.data;
      console.log(res.data);
    }
  });
}
getCarInfoOne();

function goBack() {
  router.push('/my/car');
}

function deleteCar(id) {
  removeCar(id).then(res => {
    if (res.data.code === 200000){
      ElMessage.success("移除成功")
      router.push('/my/car');
    }else {
      alert(res.data.errorMessage);
    }
  })
}

</script>

<style scoped>
.car-details-container {
  padding: 20px;
  font-family: 'Arial', sans-serif;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.back-button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  position: absolute;
  top: 20px;
  left: 20px;
  transition: background-color 0.3s ease;
}

.back-button:hover {
  background-color: #45a049;
}

.car-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.car-img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 5px;
  margin-right: 20px;
}

.car-info {
  flex: 1;
}

.specs-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.specs-table th,
.specs-table td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.specs-table th {
  background-color: #f2f2f2;
}

.actions {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.remove-btn,
.edit-btn {
  background-color: #ff6f61;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.remove-btn:hover,
.edit-btn:hover {
  background-color: #f44336;
  transform: scale(1.05);
}

.edit-btn {
  background-color: #2196F3;
}

.edit-btn:hover {
  background-color: #1E88E5;
}
</style>